/* eslint-disable react/jsx-no-duplicate-props */
import React, {Component} from 'react'
import {Button, Form, Input} from 'antd';
import {connect} from "react-redux";
import {ProFormSelect, ProFormUploadButton} from '@ant-design/pro-form';
import { removeEmptyField } from '../../../compoent/emptyFild'


class Add extends Component {

    constructor(props) {
        super(props);
        this.state = {
            headerUrl: '',
            backUrl: '',
            types: []
        }
    }


    componentDidMount() {
        const types = this.props.allType()
            .then(r => {
                console.log(types)
                this.setState({types: r.data})
            })


    }

    onFinish = (values) => {
        const {type,current} = this.props
        const {headerUrl, backUrl} = this.state
        if (headerUrl)
            values.headerUrl = headerUrl;
        if (backUrl)
            values.backUrl = backUrl;

        values = removeEmptyField(values);
        if (type === '0') {
            if (values) {
                this.props.add(values).then(res => {
                    this.props.list({page: 1, size: 10})
                })
            }
        }
        else if (type === '1') {
            //编辑接口
            if (values) {
                values.id = this.props.record.id
                this.props.upd(values).then(res => {
                    this.props.list({page: current, size: 10})
                })
            }

        }
        this.props.handleCancel()

    };

    onFinishFailed = (errorInfo) => {

    };

    render() {
        const {record, upload} = this.props
        const types = this.state.types;
        const parents = [];
        if (types && types.length > 0) {
            types.forEach(item => {
                let option = {};
                option.value = item.id;
                option.label = item.typeName;
                parents.push(option)
            })
        }

        return (
            <div>
                <Form
                    name="basic"
                    initialValues={{remember: true}}
                    labelCol={{span: 6}}
                    wrapperCol={{span: 14}}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                    initialValues={{
                        circleTypeId: record ? record.circleTypeId : '',
                        circleName: record ? record.circleName : '',
                        remarks: record ? record.remarks : '',
                        personNum: record ? record.personNum : '',
                    }}
                >

                    <ProFormSelect rules={[
                        {
                            required: true,
                            message: '请选择圈子类型!',
                        },
                    ]} options={parents} width="md" name="circleTypeId" label='圈子类型'/>


                    <Form.Item
                        label="圈子名称："
                        name="circleName"
                        rules={[{required: true, message: '请输入圈子名称!'}]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="加入人数："
                        name="personNum"
                        rules={[{required: true, message: '请输入personNum!'}]}
                    >
                        <Input/>
                    </Form.Item>

                    <ProFormUploadButton
                        max={1} width="md" name="headerUrl" label="头像"
                        placeholder="图片"
                        fieldProps={{
                            name: 'file',
                            beforeUpload: async (file) => {
                                this.setState({loading: true})
                                upload({file: file, type: 'image'}).then(r => {
                                    console.log("r",r)
                                    if (r.code === 200)
                                        this.setState({loading: false, headerUrl: r.data})
                                })


                                return false
                            }
                        }}
                    />

                    <ProFormUploadButton
                        max={1} width="md" name="backUrl" label="背景"
                        placeholder="图片"
                        fieldProps={{
                            name: 'file',
                            beforeUpload: async (file) => {
                                this.setState({loading: true})
                                upload({file: file, type: 'image'}).then(r => {
                                    if (r.code === 200)
                                        this.setState({loading: false, backUrl: r.data})
                                })


                                return false
                            }
                        }}
                    />

                    <Form.Item
                        label="描述："
                        name="remarks"
                    >
                        <Input.TextArea/>
                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                        <Button type="primary" htmlType="reset" style={{marginLeft: 30}}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

const mapState = state => ({
    ...state.circleName

});

const mapDispatch = dispatch => ({
    ...dispatch.circleName
})

export default connect(mapState, mapDispatch)(Add);